<template>
  <div>
    <div>
      <a href="/#/addarticle">
        <Button class="add" type="primary" icon="plus-round">增加文章</Button>
      </a>
      <Button class="add" type="primary" @click="exportData(1)">
        <Icon type="ios-download-outline"></Icon> 导出当前表格</Button>
      <div class="search-bar">
        <Input v-model="search" placeholder="摆设…暂无搜索功能…">
        <Button slot="append" icon="ios-search"></Button>
        </Input>
      </div>
      <div class="up">
        <Poptip title="上传需知" placement="left" width="350" trigger="hover">
          <Upload @on-success="uploadSuccess()" class="up" name="excel" action="https://www.fxpixels.site/tp5/public/index.php/backend/excel/articleup">
            <Button type="primary" size="small" icon="ios-cloud-upload-outline">上传文章数据 </Button>
          </Upload>
          <div class="api" slot="content">
            <div>
              文章上传示例文件：
              <a href="">文章范例</a>
              <Icon type="help-circled"></Icon>
            </div>
            请按照示例文件格式上传，不然则会上传失败。
            <div>
              目前仅支持
              <code class="code">.xls</code> 格式。
            </div>
          </div>
        </Poptip>
      </div>
    </div>
    <div class="table">
      <Table border :columns="columns3" :data="data3" ref="table"></Table>
    </div>
    <div class="page-bar">
      <Page :total="totalPage" :page-size="pageSize" show-total show-elevator @on-change="page"></Page>
    </div>
  </div>
</template>
<style>
  .up {
    float: right;
  }

  .ivu-select-dropdown {
    z-index: 9999999999;
  }

  .code {
    background-color: #e48978;
    /* border: 1px solid #E48978; */
    color: #fff;
    border-radius: 3px;
  }

  .up button {
    margin-top: 0px;
    margin-right: 20px;
  }

  .add {
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
  }

  .table {
    margin-top: 30px;
  }

  .page-bar {
    margin-top: 25px;
    text-align: center;
  }

</style>
<script>
  import E from "wangeditor";
  export default {
    data() {
      return {
        totalPage: null,
        currentPage: null,
        pageSize: null,
        columns3: [{
            type: "selection",
            width: 50,
            align: "center"
          },
          {
            title: "文章ID",
            key: "id",
            render: (h, params) => {
              return h("div", [h("strong", params.row.id)]);
            },
            width: 90,
            align: "center",
            sortable: true
          },
          {
            title: "文章名",
            key: "title",
            width: 200
          },
          {
            title: "作者",
            key: "author",
            width: 120,
            align: "center"
          },
          {
            title: "类型",
            key: "category",
            width: 140,
            align: "center"
          },
          {
            title: "文章简要",
            key: "body"
          },
          {
            title: "操作",
            key: "action",
            width: 160,
            align: "center",
            render: (h, params) => {
              // console.log(params)
              return h("div", [
                h(
                  "Button", {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.revise(params.row.id);
                      }
                    }
                  },
                  "修改"
                ),
                h(
                  "Button", {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        ],
        data3: [],
        editorContent: "",
        articledata: {
          title: null,
          category: null,
          content: null
        },
        categoryList: [{
            value: "New York",
            label: "233"
          },
          {
            value: "London",
            label: "789"
          }
        ],
        category: null
      };
    },
    methods: {
      revise(id) {
        // console.log(id);
        let that = this;
        this.$axios.get("backend/article/" + id + "/edit", null, function (res) {
          // console.log(res);
          that.$Modal.confirm({
            width: 960,
            title: "修改文章",
            onOk: () => {
              that.articledata.content = that.editorContent;
              that.articledata.category = that.category;
              // console.log(that.articledata);
              if (that.articledata.title == null) {
                that.articledata.title = res.title;
              }
              if (that.articledata.category == null) {
                that.articledata.category = res.category;
              }
              if (that.articledata.content == null) {
                that.articledata.content = res.body;
              }
              // console.log(that.articledata);
              setTimeout(function () {
                that.$axios.put(
                  "backend/article/" + id,
                  that.articledata,
                  function (res) {
                    if (res == 0) {
                      that.$Message.error("权限不足，修改文章失败！");
                    } else {
                      that.$Message.success("修改文章成功！");
                      that.getData();
                    }
                  }
                );
              }, 700);
            },
            onCancel: function () {},
            render: h => {
              return h("div", [
                h("div", [
                  "标题",
                  h("Input", {
                    props: {
                      value: res.title
                    },
                    on: {
                      input: val => {
                        that.articledata.title = val;
                      }
                    }
                  })
                ]),
                h("br"),
                h("div", [
                  "类型",
                  h(
                    "Select",
                    that.categoryList.map(function (item) {
                      // console.log(item.value);
                      return h("Option", {
                        props: {
                          value: item.value
                        },
                        nativeOn: {
                          click: val => {
                            that.category = val.target.innerText;
                          }
                        }
                      });
                    })
                  )
                ]),
                h("br"),
                "正文",
                h("div", {
                  props: {},
                  attrs: {
                    id: "Eeditor"
                  },
                  on: {}
                })
              ]);
            }
          });
          var editor = new E("#Eeditor");
          editor.customConfig.onchange = function (html) {
            that.editorContent = html;
          };
          editor.customConfig.uploadImgServer = "/tp5/public/uploads";
          editor.create();
          editor.txt.html(res.body);
        });
      },
      remove(params) {
        // console.log(params)
        let articleId = params.row.id;
        let index = params.index;
        this.$store.commit("articleindex", index);
        let page = this.$store.state.currentpage;
        var that = this;
        this.$Modal.confirm({
          title: "确认删除",
          content: `你要删除：<br>《 ${this.data3[index].title} 》这篇文章吗？`,
          onOk: function () {
            that.$axios.delete("backend/article/" + articleId, null, function (
              res
            ) {
              if (res == 0) {
                that.$Message.error("权限不足，删除文章失败！");
              } else {
                that.$Message.success("删除文章成功！");
                that.data3.splice(index, 1);
              }
            });
          },
          onCancel: () => {
            this.$Message.info("取消删除");
          }
        });
      },
      getData(page) {
        setTimeout(function () {}, 200);
        var that = this;
        // console.log(page)
        this.$axios.get("backend/article", page || null, function (res) {
          // console.log(res);
          that.totalPage = res[2];
          that.pageSize = res[3];
          var data = res[0];
          that.data3 = [];
          for (var i = 0; i < data.length; i++) {
            let id = data[i].id;
            let title = data[i].title;
            let body = data[i].body.substr(0, 27);
            let category = data[i].category;
            let author = data[i].user_id;
            let article = {
              id: id,
              title: title,
              author: author,
              category: category,
              body: body
            };
            that.data3.push(article);
          }
        });
      },
      page(page) {
        this.currentPage = {
          page: page
        };
        this.$store.commit("c_page", page);
        this.getData(this.currentPage);
      },
      uploadSuccess() {
        this.$Message.success("上传文章数据成功！");
      }
    },
    mounted() {
      this.getData();
      this.$store.commit("bread", "文章列表");
    },
    computed: {}
  };

</script>
